<script setup>
import { computed, ref } from 'vue'
import { formatMillion } from '@/common/utils'

// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

// 参数
const props = defineProps({
  // 数据
  list: {
    type: Array,
    default: () => [],
  },
  // 当前播放歌曲信息
  playerInfo: {
    type: Object,
    default: () => ({}),
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 20,
  },
  // 是否显示序号
  serialNumber: {
    type: Boolean,
    default: false,
  },
  // 是否列，否则行显示
  isRow: {
    type: Boolean,
    default: false,
  },
  // 结合 isRow 使用-行数：2
  row: {
    type: Number,
    default: 2,
  },
  // 是否显示喜欢图标
  isLike: {
    type: Boolean,
    default: false,
  },
  // 是否显示添加队列图标
  isAdd: {
    type: Boolean,
    default: false,
  },
  // 是否显示删除图标
  isDel: {
    type: Boolean,
    default: false,
  },
  // 主题颜色
  theme: {
    type: String,
    default: '#a0abff',
  },
  // 每一项背景颜色
  itemBgColor: {
    type: String,
    default: '#ffffff',
  },
  // 图片形状，circle-圆形，square-方形
  imageShape: {
    type: String,
    default: 'square',
  },
  // 是否显示加载
  loading: {
    type: Boolean,
    default: false,
  },
  // 是否居中显示
  isLoadingFixed: {
    type: Boolean,
    default: false,
  },
  // 加载更多状态
  loadStatus: {
    type: String,
    default: 'loadmore',
  },
  // 加载更多提示文字
  loadText: {
    loadmore: '轻轻上拉',
    loading: '努力加载中',
    nomore: '实在没有了',
  },
  // Empty 模式-列表为空
  emptyMode: {
    type: String,
    default: 'list',
  },
  // Empty 提示文字
  emptyText: {
    type: String,
    default: '暂无数据',
  },
  // 自定义布局
  custom: {
    type: Boolean,
    default: false,
  },
})

// 自定义事件
const emit = defineEmits([
  'addQueue',
  'like',
  'click',
  'del',
  'scroll',
  'scrollTolower',
])

// 喜欢图标
const likeName = (like) => {
  return like ? 'xihuan' : 'xihuan1'
}

// 播放、暂停图标
const playName = computed(() => {
  return props.playerInfo.play ? 'bofang' : 'bofang1'
})

// 加入播放队列
const changeAddQueue = (item) => {
  emit('addQueue', item)
}

// 收藏喜欢-歌曲、歌单
const changeLike = (item) => {
  emit('like', item)
}

// 点击歌曲
const changeSongItem = (item) => {
  emit('click', item)
}

// 删除项
const changeDel = (item, index) => {
  emit('del', item, index)
}

// 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
const handleScroll = (e) => {
  emit('scroll', e)
}

// 滚动到底部
const handleScrollTolower = () => {
  emit('scrollTolower')
}
</script>

<template>
  <view class="ty-list">
    <!-- 滚动区域 -->
    <template v-if="list.length > 0">
      <scroll-view
        class="ty-list-scroll"
        scroll-y
        enable-back-to-top
        lower-threshold="30"
        scroll-anchoring
        @scroll="handleScroll"
        @scrolltolower="handleScrollTolower"
      >
        <!-- 列表区域 -->
        <view
          class="ty-song-list"
          :class="{ 'ty-song-list--row': isRow }"
          :style="{ '--row': row }"
        >
          <!-- 歌曲/歌单项 -->
          <view
            class="song-item"
            v-for="(item, index) in list"
            :class="{
              'song-serial-number': serialNumber,
              'song-play': item?.id === playerInfo?.id,
            }"
            :style="{ 'background-color': itemBgColor }"
            :key="item.id"
            @click="changeSongItem(item)"
          >
            <!-- 序列号 -->
            <view
              class="serial-number"
              v-if="serialNumber"
              >{{ index + 1 }}</view
            >
            <!-- 图片 -->
            <view class="song-image">
              <!-- 标签 -->
              <view
                class="song-tag u-line-1"
                v-if="item.copywriter && row < 3"
                >{{ item.copywriter }}</view
              >
              <!-- 图片 -->
              <u-image
                mode="aspectFill"
                width="100%"
                height="100%"
                :shape="imageShape"
                :src="item.pic ? item.pic : item.coverImgUrl || item.picUrl"
              ></u-image>
              <!-- 歌曲播放显示 -->
              <u-mask :show="item.id === playerInfo.id">
                <view class="song-bofang">
                  <u-icon
                    custom-prefix="ty-icon"
                    :name="playName"
                    :size="40"
                    :color="theme"
                  ></u-icon>
                </view>
              </u-mask>
              <!-- 删除图标 -->
              <view
                class="song-del"
                @click.stop
                v-if="isDel"
              >
                <u-icon
                  name="close"
                  :size="28"
                  color="#dd6161"
                  @click="changeDel(item, index)"
                ></u-icon>
              </view>
            </view>
            <!-- 歌曲/歌单信息 -->
            <view class="song-info">
              <!-- 歌曲/歌单名称 -->
              <view
                class="name u-line-2"
                v-html="item.name"
              >
              </view>
              <!-- 存在歌曲作者显示 -->
              <view
                class="artist u-line-1"
                v-if="item.artist"
                v-html="item.artist"
              ></view>
              <!-- 存在播放数则显示 -->
              <view
                class="count"
                v-else-if="row < 3 && item.playCount"
              >
                <view class="count-track">
                  <text class="text">{{ item.trackCount }} 首</text>
                </view>
                <view class="count-play">
                  <u-icon
                    custom-prefix="ty-icon"
                    name="yinle"
                    color="#909399"
                    label-color="#909399"
                    :size="25"
                    :label="formatMillion(item.playCount)"
                    :label-size="24"
                  ></u-icon>
                </view>
              </view>
            </view>
            <!-- 按钮区域 -->
            <view
              class="song-ability"
              v-if="item.artist || isDel || isLike || isAdd"
            >
              <view
                class="ability-icon"
                @click.stop
              >
                <template v-if="!isDel">
                  <u-icon
                    custom-prefix="ty-icon"
                    :name="likeName(item.like)"
                    :size="50"
                    :color="theme"
                    v-if="isLike"
                    @click="changeLike(item)"
                  ></u-icon>
                  <template v-if="isAdd">
                    <u-icon
                      custom-prefix="ty-icon"
                      name="add-music"
                      :size="50"
                      :color="theme"
                      v-if="!item.addQueue"
                      @click="changeAddQueue(item)"
                    ></u-icon>
                  </template>
                </template>
                <u-icon
                  name="close"
                  :size="30"
                  color="#666"
                  @click="changeDel(item, index)"
                  v-else-if="!isRow"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
        <!-- 加载更多提示 -->
        <u-loadmore
          :status="loadStatus"
          :load-text="loadText"
          :margin-bottom="20"
          v-if="list.length >= pageSize && loadStatus !== 'loadmore'"
        />
      </scroll-view>
    </template>
    <!-- 没有数据显示 -->
    <view class="ty-list-noData">
      <u-empty
        :text="emptyText"
        :mode="emptyMode"
      ></u-empty>
    </view>
  </view>
</template>

<style lang="scss" scoped>
$row: var(--row);

.ty-list {
  padding: 0 $ty-lg-padding;
  height: 100%;
  &-noData {
    display: contents;
  }
}

.ty-song-list,
.u-load-more-wrap {
  padding-bottom: $ty-lg-padding;
}

.ty-list-scroll {
  height: 100%;
  position: relative;
}

.song-item {
  background-color: $u-bg-color-inverse;
  border-radius: $ty-border-radius;
  overflow: hidden;
  margin-top: $ty-lg-padding;
  transition: all 0.3s linear;
  position: relative;
  @include ty-flex-row;
  @include ty-flex-nowrap;
  &:hover,
  &:active {
    opacity: 0.8;
  }
  &.song-play {
    background-color: rgba($color: $u-type-primary, $alpha: 0.8) !important;
    .name {
      color: $u-bg-color-inverse;
    }
    // .artist {
    //   color: $u-type-primary;
    // }
    .serial-number {
      color: $u-type-primary-disabled;
    }
    :deep(.highlight) {
      color: $u-type-primary-disabled !important;
    }
  }
  &.song-serial-number {
    background-color: initial;
  }
}

// 序列号
.song-serial-number {
  .serial-number {
    @include ty-flex;
    @include ty-col-center;
    @include ty-row-center;
    text-align: center;
    color: $u-content-color;
    font-size: 30rpx;
    width: 80rpx;
  }
  .song-image {
    border-radius: $ty-border-radius;
    width: 120rpx;
    height: 120rpx;
  }
  .song-info {
    .name {
      margin-bottom: $ty-md-padding;
      font-size: 28rpx;
    }
    .artist {
      color: $u-type-primary-disabled;
      font-size: 22rpx;
    }
    :deep(.highlight) {
      color: $u-type-primary;
    }
  }
}

.song-image {
  position: relative;
  width: 150rpx;
  height: 150rpx;
  overflow: hidden;
  :deep(.u-mask) {
    position: absolute;
  }
  .song-bofang {
    @include ty-flex;
    @include ty-col-center;
    @include ty-row-center;
    height: 100%;
  }
  .song-tag {
    background-color: rgba($color: $u-type-primary, $alpha: 0.5);
    color: $u-bg-color-inverse;
    border-top-left-radius: $ty-border-radius-lg;
    border-bottom-left-radius: $ty-border-radius-lg;
    padding: $ty-md-padding $ty-lg-padding;
    font-size: 20rpx;
    position: absolute;
    top: $ty-md-padding;
    right: 0;
    z-index: 1;
    max-width: 80%;
  }
  .song-del {
    position: absolute;
    z-index: 99999;
    top: 0;
    right: 0;
    padding: $ty-md-padding;
  }
}

.play-count {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.5);
  padding: $ty-sm-padding $ty-md-padding;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  .text {
    color: $u-bg-color-inverse;
    font-size: 20rpx;
    margin-left: $ty-md-padding;
  }
}

.song-info {
  padding: 0 $ty-lg-padding;
  @include ty-flex-col;
  @include ty-row-around;
  flex: 1;
  overflow: hidden;
  .name {
    color: $u-content-color;
    font-size: 30rpx;
  }
  .artist {
    color: $u-type-primary-disabled;
    font-size: 26rpx;
  }
  .count {
    @include ty-flex;
    @include ty-col-center;
    .text {
      color: $u-tips-color;
      font-size: 24rpx;
      padding-left: $ty-sm-padding;
    }
    &-track {
      margin-right: $ty-lg-padding;
    }
  }
}

.song-ability {
  @include ty-flex;
  @include ty-col-center;
  @include ty-row-center;
  min-width: 10%;
}

.ty-song-list {
  &--row {
    @include ty-flex-row;
    @include ty-flex-wrap;
    margin-left: calc(0px - $ty-lg-padding);
    .song-item {
      @include ty-flex-col;
      @include ty-col-top;
      width: calc(100% / $row - $ty-lg-padding);
      margin-left: $ty-lg-padding;
    }
    .song-image {
      flex: 0 1 calc(100vw / $row);
      width: 100%;
    }
    .song-info {
      @include ty-row-between;
      padding: $ty-lg-padding;
      .count {
        margin-top: $ty-lg-padding;
      }
      .name {
        font-size: 28rpx;
      }
      .artist {
        font-size: 18rpx;
        margin-top: $ty-md-padding;
      }
    }
  }
}
</style>
